<template>
    <div style="width: 100%">
        <hot-table :data="hotData"
                   :rowHeaders="true"
                   :colHeaders="true"
                   :licenseKey="licenseKey"
                   :settings="hotSettings"
        ></hot-table>
    </div>

</template>

<script>
import {defineComponent} from 'vue';
import {HotColumn, HotTable} from '@handsontable/vue3';
import {registerAllModules} from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.css';

// register Handsontable's modules
registerAllModules();

const colors = ['yellow', 'red', 'orange and another color', 'green',
    'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'];

const ExampleComponent = defineComponent({
    data() {
        return {
            licenseKey: '6b943-a36b4-54e55-b1a34-9545f',
            hotSettings: {
                search: true,
                autoWrapRow: true, // 自动换行，默认：true；TAB在最后一列中按或向右箭头将移动到下一行的第一列
                fillHandle: true, // 单元格内容拖拽复制，可选值：true、false、vertical、horizontal；默认：true，垂直/水平都支持
                minRows: 20,  // 最少行
                undoRedo: true, // 开启撤销
                copyPaste: true, // 开启剪切、复制
                manualColumnResize: true, // 列拉伸,调整大小
                manualRowResize: true, // 行拉伸,调整大小
                manualColumnMove: true, // 拖动交换列
                manualRowMove: true, // 拖动交换行
                autoColumnSize: {syncLimit: 300},

                dropdownMenu: {
                    items: {
                        "filter_by_condition": {
                            name: '主要筛选',
                        },
                        "filter_operators": {
                            name: '动作筛选',
                        },
                        "filter_by_condition2": {
                            name: '次要筛选',
                        },
                        "filter_by_value": {
                            name: '值筛选',
                        },
                        "filter_action_bar": {
                            name: '栏筛选',
                        }
                    }
                },
                contextMenu: { // 自定义右键菜单
                    items: {
                        "row_above": {
                            name: '向上插一行'
                        },
                        "row_below": {
                            name: '向下插一行'
                        },
                        "col_left": {
                            name: '向左插一列'
                        },
                        "col_right": {
                            name: '向右插一列'
                        },
                        "hsep1": "---------", // 分隔线
                        "remove_row": {
                            name: '删除当前行',
                        },
                        "remove_col": {
                            name: '删除当前列',
                        },
                        "clear_column": {
                            name: '清空当前列',
                        },
                        "hsep2": "---------", // 必须和上次的变量名不一样
                        "undo": {
                            name: '撤销',
                        },
                        "cut": {
                            name: '剪切',
                        },
                        "copy": {
                            name: '复制',
                        },
                        "alignment": {
                            name: '对齐',
                        },
                        "hsep3": "---------",
                        "commentsAddEdit": { // 必须开启 comments: true
                            name: '添加备注',
                        },
                        "commentsRemove": { // 必须开启 comments: true
                            name: '删除备注',
                        },
                        "freeze_column": { // 必须开启 manualColumnFreeze: true
                            name: '固定列',
                        },
                        "unfreeze_column": { // 必须开启 manualColumnFreeze: true
                            name: '取消固定列',
                        }
                    }
                },

                columns: [
                    {
                        type: 'autocomplete',
                        source: colors,
                        strict: false
                    },
                    {
                        type: 'autocomplete',
                        source: colors,
                        strict: false,
                        visibleRows: 4
                    },
                    {
                        type: 'dropdown',
                        source: colors,
                        strict: false,
                        trimDropdown: false
                    }
                ],
            },
            hotData: [
                ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
                ['2017', 10, 11, 12, 13, 15, 16],
                ['2018', 10, 11, 12, 13, 15, 16],
                ['2019', 10, 11, 12, 13, 15, 16],
                ['2020', 10, 11, 12, 13, 15, 16],
                ['2021', 10, 11, 12, 13, 15, 16]
            ],
        };
    },
    components: {
        HotTable,
        HotColumn,
    }
});
export default ExampleComponent;
</script>